<template>
    <div class="todo-info">
        <span class="total">{{total}} item left</span>
        <div class="tabs">
            <a
                :class="['btn','primary','border',state === item ? 'actived': '']"
                v-for="(item, index) in states"
                :key="index"
                @click="toggleState(item)"
            >{{item}}</a>
        </div>
        <button class="btn info" @click="clearCompleted">Clear Completed</button>
    </div>
</template>

<script>
    export default {
        name: "TodoInfo",
        props: {
            total: Number
        },
        data() {
            return {
                states: ['all', 'active', 'completed'],
                state: 'all'
            }
        },
        methods: {
            toggleState(state) {
                this.state = state
                this.$emit('toggleState', state)
            },
            clearCompleted() {
                this.$emit('clearCompleted')
            }
        }
    }
</script>

<style lang="stylus" scoped>
@import "~styles/theme.styl"
@import "~styles/mixins.styl"

.todo-info
    display flex
    justify-content space-between
    padding 5px 10px
    font-weight 400
    line-height 30px
    border-top 1px solid rgba(0,0,0,.1)

    .total
        color $red

    .tabs
        display flex
        justify-content space-between
        width 200px

    .btn.primary.border
        primaryBorderBtn()

        &.actived
            primaryBtn()
    .btn.info
        infoBtn()
</style>
